<template>
  <view class="product-image">
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" @change="change">
    	<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <view class="popup-content-top">
          <text class="text">产品图片</text>
          <uni-icons type="closeempty" size="20" color="#dde2ec" @click="close"></uni-icons>
        </view>
        <view class="popup-content-swiper">
          <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="currentImageList"
            :current="current" :mode="mode"
          	:dots-styles="dotsStyles" field="content">
          	<swiper class="swiper-box" circular  @change="changeSwiper" :current="swiperDotIndex">
          		<swiper-item v-for="(item, index) in currentImageList" :key="index">
          			<view class="swiper-item" :class="'swiper-item' + index">
                  <image :src="baseUrl + item" mode=""></image>
          				<!-- <text style="color: #fff; font-size: 32px;">{{item}}</text> -->
          			</view>
          		</swiper-item>
          	</swiper>
          </uni-swiper-dot>
        </view>
        <view class="popup-content-close">
          <button @click="close">关闭</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {baseUrl} from '@/config.js'
  import {mapState,mapMutations} from 'vuex'
  export default {
    options: {
    	styleIsolation: 'shared', // 解除样式隔离
    },
    props:{
      currentImageList:{
        type:Array,
        default:()=>[]
      }
    },
    data(){
      return {
        type: 'center',
        baseUrl:baseUrl,
  			// info: [{
  			// 	content: '内容 A'
  			// }, {
  			// 	content: '内容 B'
  			// }, {
  			// 	content: '内容 C'
  			// }],
  			current: 0,
  			mode: 'round',
        dotsStyles: {},
        swiperDotIndex: 0,
      }
    },
    computed:{
      ...mapState('app',['imageSwitch'])
    },
    watch:{
      imageSwitch(newVal,oldVal){
        if(newVal){
          this.open()
        }else{
          this.close()
        }
      }
    },
    methods:{
      ...mapMutations('app',['OPEN_IMAGE','COLSE_IMAGE']),
      change(e) {
        if(e.show){
          this.OPEN_IMAGE()
        }else{
          this.COLSE_IMAGE()
        }
      	console.log('当前模式：' + e.type + ',状态：' + e.show);
      },
      open(type) {
      	this.$refs.popup.open(type)
      },
      close(type) {
      	this.$refs.popup.close()
      },
      toggle(type) {
      	this.type = type
      	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      	this.$refs.popup.open(type)
      },
      changeSwiper(e){
        this.current = e.detail.current
      },
      clickItem(e) {
      	this.swiperDotIndex = e
      }
    },
  }
</script>

<style>
  @import url('../../static/style/eCatalog/product-image.css');
</style>